<template>
  <div class="contract-base">
    <a-form-model
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      style="margin: 40px 0;"
    >
      <a-form-model-item label="业务名称" prop="tm_name">
        <a-input v-model="form.tm_name" type="text" placeholder="输入业务名称" />
      </a-form-model-item>
<!--      <a-form-model-item label="申请主体">-->
<!--        <a-input v-model="form.subject" type="text" placeholder="输入申请主体" />-->
<!--      </a-form-model-item>-->
      <a-form-model-item label="申请主体" prop="subject_id">
        <a-select
          show-search
          :value="sname"
          :filter-option="false"
          @change="handleChange"
          @search="handleSearch"
          style="width: 90%"
        >
          <a-select-option v-for="(item,index) in subjectOpts" :key="index" :value="item.id" :data-subject="item.subject">{{item.subject}}</a-select-option>
        </a-select>
        <a-icon :style="{ width: '10%', fontSize: '20px' }" type="plus-circle" @click="addApply" />
      </a-form-model-item>
      <a-form-model-item label="客户姓名" prop="customer_name">
        <a-input v-model="form.customer_name" type="text" placeholder="输入客户姓名" />
      </a-form-model-item>
      <a-form-model-item label="联系电话" prop="phone1">
        <template slot="help">
          <div style="color:#f00">必须输入真实有效的联系电话，财务会不定期抽查，若不真实，当前合同代理费取消</div>
        </template>
        <a-input v-model="form.phone1" type="text" placeholder="输入客户真实电话" />
      </a-form-model-item>
      <a-form-model-item label="联系电话2" prop="phone2">
        <a-input v-model="form.phone2" type="text" placeholder="输入客户真实电话" />
      </a-form-model-item>
      <a-form-model-item label="客户微信" prop="wechat">
        <a-input v-model="form.wechat" type="text" placeholder="输入客户微信" />
      </a-form-model-item>
      <a-form-model-item label="电子邮箱" prop="email">
        <a-input v-model="form.email" type="text" placeholder="输入电子邮箱" />
      </a-form-model-item>
      <a-form-model-item
        :wrapperCol="{ span: 9, offset: 3 }"
      >
        <a-button htmlType="submit" type="primary" @click="nextStep">确认保存</a-button>
      </a-form-model-item>
    </a-form-model>
    <apply-modal v-if="addVisible" @cancel="onCancelAdd"></apply-modal>
  </div>
</template>

<script>
  import { autoSubject } from '@/api/common'
  import { getSubject } from '@/api/customer'
  import ApplyModal from '@/views/customer/components/ApplyModal'

  export default {
    name: 'Base',
    components: { ApplyModal },
    props: {
      info: {
        type: Object,
        default: () => {}
      },
      part: {
        type: String,
        default: '1'
      }
    },
    data () {
      return {
        labelCol: { span: 3 },
        wrapperCol: { span: 7 },
        form: this.info,
        rules: {
          tm_name: [
            { required: true, message: '必须填写注册名称', trigger: 'blur' }
          ],
          customer_name: [
            { required: true, message: '必须填写乙方（客户姓名）', trigger: 'blur' }
          ],
          // subject_id: [
          //   { required: true, message: '必须填写申请主体', trigger: 'blur' }
          // ],
          phone1: [
            { required: true, message: '必须填写客户联系电话', trigger: 'blur' }
          ],
          phone2: [
            { required: true, message: '必须填写客户联系电话', trigger: 'blur' }
          ],
          // phone2: [
          //   { pattern: /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/, message: '手机号输入错误', trigger: 'blur' }
          // ],
          wechat: [ { required: true, message: '必须填写客户微信', trigger: 'blur' } ]
        },
        searchSource: [],
        sname: '',
        subjectOpts: [],
        addVisible: false
      }
    },
    created () {
      this.getEditSubject()
      this.sname = (this.form.subject_id).toString()
    },
    methods: {
      getEditSubject () {
        getSubject().then(res => {
          this.subjectOpts = res.result.data
        })
      },
      nextStep () {
        const app = this
        app.$refs.ruleForm.validate(valid => {
          if (valid) {
            app.$emit('nextStep', this.part)
          } else {
            return false
          }
        })
      },
      onSelect (value) {
        this.form['subject_id'] = value
      },
      onComplete (searchText) {
        autoSubject(searchText).then(res => {
          this.searchSource = res.result.subject_data
        })
      },
      handleChange (value) {
        this.sname = value
        this.form['subject_id'] = value
        this.form['subject'] = ''
        // const params = {}
        // params['filter[subject_id]'] = value
        // getSubject(params).then(res => {
        //   this.subjectOpts = res.result.data
        // })
      },
      handleSearch (value) {
        const params = {}
        params['filter[subject]'] = value
        getSubject(params).then(res => {
          this.subjectOpts = res.result.data
        })
      },
      addApply () {
        this.addVisible = true
      },
      onCancelAdd (visible) {
        this.addVisible = visible
      }
    },
    watch: {
      info (val) {
        this.form = {}
        this.form = val
      }
    }
  }
</script>

<style scoped>

</style>
